<template>
	<div>
		<el-form :inline="true" size="mini">
			<el-form-item>
				<el-input  v-model="keyword" placeholder="请输入vip编码"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="search" >查询VIP</el-button>
				<el-button type="primary" @click="disableAddVIP=true">新增VIP</el-button>
			</el-form-item>
		</el-form>
		<el-table  :data="pageInfo.list" style="100%" @selection-change="handleSelectionChange">
			<el-table-column type="selection"></el-table-column>
		    <el-table-column
		       label="VIP编号"
		       prop="id"
		       width="80"
		    >	
			</el-table-column>
			<el-table-column
			   label="编码"
			   prop="vipcode"
			   width="80"
			>			
			</el-table-column>
			
			<el-table-column
			   label="姓名"
			   prop="vipname"
			   width="80"
			>			
			</el-table-column>
			
			<el-table-column
			   label="性别"
			   prop="sex"
			   width="80"
			>			
			</el-table-column>
			
			<el-table-column
			   label="密码"
			   prop="vippassword"
			   width="80"
			>			
			</el-table-column>
			
			<el-table-column
			   label="电话"
			   prop="phone"
			   width="80"
			>			
			</el-table-column>
			<el-table-column
			   label="地址"
			   prop="address"
			   width="80"
			>			
			</el-table-column>
			<el-table-column
			   label="邮箱"
			   prop="eamil"
			   width="120"
			>			
			</el-table-column>
			<el-table-column
			   label="积分"
			   prop="score"
			   width="80"
			>			
			</el-table-column>
			
			<el-table-column label="操作" width="300">
				<template slot-scope="scope">
					
					<template >
						<el-button  @click="handleTypeEdit(scope)" size="mini">编辑</el-button>
						<el-button  @click="handleTypeDel(scope)" size="mini">删除</el-button>
					</template>
				</template>
			</el-table-column>
		</el-table>
		
		
		
		<el-pagination
				  layout="prev,pager,next,total,jumper,sizes"
				  :total="pageInfo.total"  
				  :page-size="pageInfo.pageSize"
				  :page-count="pageInfo.nevigatePages"		  
				  :page-sizes="[5,10,15,20]"
				  :current-page="pageInfo.pageNum"
				  background
				 @current-change="handleCurrentChange"
				  @size-change="handleSizeChange"
				>
				
		</el-pagination>	
						
		<div slot="footer">
				 <el-button type="danger" size="mini" :disabled="ids.length==0" @click="batchDelete">批量删除</el-button>
		     
		</div>		
				
		<el-dialog :visible.sync="disableAddVIP" title="新增VIP" center>
			
					<el-form :inline="true" align="center" size="mini">
						<el-form-item label="编码">
							<el-input  v-model="type.vipcode" placeholder="编码"></el-input>
						</el-form-item>
						<el-form-item label="姓名">
							<el-input  v-model="type.vipname" placeholder="姓名"></el-input>
						</el-form-item>
						<el-form-item label="性别">
							<el-select placeholder="性别" v-model="type.sex">
								<el-option label="男" value="1"></el-option>
								<el-option label="女" value="2"></el-option>	
								
							</el-select>
						</el-form-item>			 
						<el-form-item label="密码">
							<el-input  v-model="type.vippassword" placeholder="密码"></el-input>
						</el-form-item>
						<el-form-item label="电话">
							<el-input  v-model="type.phone" placeholder="电话"></el-input>
						</el-form-item>
						<el-form-item label="地址">
							<el-input  v-model="type.address" placeholder="地址"></el-input>
						</el-form-item>
				        <el-form-item label="邮箱">
				        	<el-input  v-model="type.eamil" placeholder="邮箱"></el-input>
				        </el-form-item> 
						<el-form-item label="积分">
							<el-input  v-model="type.score" placeholder="积分"></el-input>
						</el-form-item>
						
						<el-form-item>
							
							<el-button type="warning" @click="disableAddVIP=false">取消</el-button>
							<el-button type="primary" @click="insertType()">保存</el-button>
						</el-form-item>
					</el-form>			
				
		</el-dialog>
		
		<el-dialog :visible.sync="disableEditVIP" title="编辑VIP" center>
			<el-form :inline="true" align="center" size="mini">
				<el-form-item label="编码">
					<el-input  v-model="type.vipcode" placeholder="编码"></el-input>
				</el-form-item>
				<el-form-item label="姓名">
					<el-input  v-model="type.vipname" placeholder="姓名"></el-input>
				</el-form-item>				
				<el-form-item label="性别">
					<el-select placeholder="性别" v-model="type.sex">
						<el-option label="男" value="1"></el-option>
						<el-option label="女" value="2"></el-option>						
					</el-select>
				</el-form-item>
				<el-form-item label="密码">
					<el-input  v-model="type.vippassword" placeholder="密码"></el-input>
				</el-form-item>
				<el-form-item label="电话">
					<el-input  v-model="type.phone" placeholder="电话"></el-input>
				</el-form-item>
				<el-form-item label="地址">
					<el-input  v-model="type.address" placeholder="地址"></el-input>
				</el-form-item>
				<el-form-item label="邮箱">
					<el-input  v-model="type.eamil" placeholder="邮箱"></el-input>
				</el-form-item>
				<el-form-item label="积分">
					<el-input  v-model="type.score" placeholder="积分"></el-input>
				</el-form-item>
				<el-form-item>
					<template>
					<el-button type="warning" @click="disableEditVIP=false">取消</el-button>
					<el-button type="primary" @click="insertEditVIP()">保存</el-button>
					</template>
				</el-form-item>
			</el-form>			
							
		</el-dialog>
		
		
	 </div>
</template>

<script>
	export default{
		data(){
			return{
				pageInfo:{
				  pageNum:1,
				  pageSize:5
				},
				keyword:"",
				type:{},
				params:{},
				disableAddVIP:false,
				disableEditVIP:false,
				ids:[],
				typeList:[]
				
			}
		},
		created(){
			this.showData(1,this.pageInfo.pageSize,this.keyword);
		},
		methods:{
			showData(pageNum,pageSize,keyword){
				let url = "VIPManage/getPaged";
				let params = `pageNum=${pageNum}&pageSize=${pageSize}&keyword=${keyword}`;
				axios.post(url,params).then(resp=>{
					this.pageInfo = resp.data.data;
				})
			},
			search(){
				this.showData(1,this.pageInfo.pageSize,this.keyword);
			},
			handleCurrentChange(pageNum){
				this.showData(pageNum,this.pageInfo.pageSize,this.keyword);
			},
			handleSizeChange(pageSize){
				this.showData(1,pageSize,this.keyword);
				this.pageInfo.pageSize == pageSize;
			},
			
			insertType(){
				let url = "VIPManage/insert";
				
				axios.post(url,this.type).then(resp=>{
					if(resp.data.data == 1){						
						this.showData(1,this.pageInfo.pageSize,this.keyword);
						this.disableAddVIP = false;
						
						this.type = {};
					}
				});
			},
			insertEditVIP(){
				let url = "VIPManage/update";
				
				axios.post(url,this.type).then(resp=>{
					if(resp.data.data == 1){						
						this.showData(1,this.pageInfo.pageSize,this.keyword);
						this.disableEditVIP = false;
						
						this.type = {};
					}
				});
			},
			batchDelete(){
				this.$confirm("是否删除？","提示").then(()=>{
					let url = "VIPManage/batchDeleteVIP";
					axios.post(url,this.ids).then(resp=>{
						if(resp.data.data>0){
							this.$alert("删除成功！");
							this.showData(1,this.pageInfo.pageSize,this.keyword);
						}
					});
				}).catch(err=>{
					this.$alert(err);
				})
			},
			handleTypeEdit(scope){
				this.disableEditVIP = true;
				this.$set(scope.row,"edit",true);
				this.type={...scope.row};
				
			},
			handleTypeDel(scope){
				this.$confirm("是否删除","提示").then(()=>{
					let url = "VIPManage/delete";
					axios.post(url,`id=${scope.row.id}`).then(resp=>{
						if(resp.data.data == 1){
							this.$alert("删除成功！");
							this.showData(1,this.pageInfo.pageSize,this.keyword)
						}
					});
				}).catch(()=>{
					console.log("cancel");
				});
			},
			handleSelectionChange(item){
				this.ids = item.map(o=>o.id);
			}
						
		}
	}
</script>

<style>
</style>
